<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/jquery.tokeninput.fixed.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/resources/css/token-input.css" type="text/css" />


<script type="text/javascript">
	$(document).ready(
			function() {
				$("input[type=button]").click(
						function() {
							alert("Would submit: "
									+ $(this).siblings("input[type=text]")
											.val());
						});
			});
</script>

<title>Airport autocomplete </title>
</head>
<body>

<h2 id="theme">From</h2>
    <div>
        <input type="text" id="from" />
        <input type="button" value="Submit" />
        <script type="text/javascript">
        $(document).ready(function() {
//            $("#demo-input-facebook-theme").tokenInput("${pageContext.request.contextPath}/airportjson.html", {
            $("#from").tokenInputFixed("http://nano.aviasales.ru/places_en", {
            	queryParam: "term",
            	propertyToSearch: "name",
            	placeholder: "enter a country, city or airport",
            	resultsLimit: 10,
            	resultsFormatter: function(item) {
            		if (item.airport_name == null) {
            			return "<li>" + item.iata + " - " + item.name + "</li>";
            		} else {
            			if (item.airport_name.toLowerCase().indexOf("airport") >= 0) {
            				return "<li>" + item.iata + " - " + item.airport_name + ", " + item.country_iata+ "</li>";	
            			} else {
            				return "<li>" + item.iata + " - " + item.airport_name + " Airport, " + item.country_iata + "</li>";            			
            			}
            		}
            	}, 
                tokenFormatter: function(item) {
                	if (item.airport_name == null) {
            			return "<li>" + item.iata + " - " + item.name + "</li>";
            		} else {
            			if (item.airport_name.toLowerCase().indexOf("airport") >= 0) {
            				return "<li>" + item.iata + " - " + item.airport_name + ", " + item.country_iata+ "</li>";	
            			} else {
            				return "<li>" + item.iata + " - " + item.airport_name + " Airport, " + item.country_iata + "</li>"; 			
            			}
            		}
                },
            	tokenLimit: 1, 
            	preventDuplicates: true,
            	tokenValue: "iata"
            });
        });
        </script>
    </div>


</body>
</html>